<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue Router Nested Routes Demo</title>
    <script src="../../../js/vue.js"></script>
    <script src="../../../js/vue-router.js"></script>
    <style>
        .active {
            color: red;
        }
        .fade-enter-active, .fade-leave-active {
            transition: all 0.5s ease;
        }
        .fade-enter, .fade-leave-to {
            opacity: 0;
            transform: translateX(200%);
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <p>
            <router-link to="/user/123" active-class="active">用户信息</router-link>
            <router-link to="/user/123/posts" active-class="active">用户帖子</router-link>
        </p>
        <transition name="fade">
            <router-view></router-view>
        </transition>
    </div>
    
    <script>
        // 用户组件
        var User = {
            template: `
                <div>
                    <h2>用户 {{ $route.params.id }}</h2>
                    <p>信息：{{ userInfo }}</p>
                    <p><router-link :to="'/user/' + $route.params.id + '/profile'">个人资料</router-link></p>
                    <p><router-link :to="'/user/' + $route.params.id + '/posts'">帖子列表</router-link></p>
                    <router-view></router-view> <!-- 显示子路由 -->
                </div>
            `,
            data() {
                return {
                    userInfo: ''
                };
            },
            watch: {
                '$route.params': 'fetchUserInfo' // 监听路由参数的变化
            },
            created() {
                this.fetchUserInfo();
            },
            methods: {
                fetchUserInfo() {
                    this.userInfo = '用户 ' + this.$route.params.id + ' 的信息';
                }
            }
        };

        // 用户个人资料组件
        var UserProfile = {
            template: `
                <div>
                    <h3>个人资料</h3>
                    <p>姓名：张三</p>
                    <p>年龄：25</p>
                    <p>性别：男</p>
                </div>
            `
        };

        // 用户帖子列表组件
        var UserPosts = {
            template: `
                <div>
                    <h3>帖子列表</h3>
                    <ul>
                        <li>帖子 1</li>
                        <li>帖子 2</li>
                        <li>帖子 3</li>
                    </ul>
                </div>
            `
        };

        // 实例化路由
        var router = new VueRouter({
            routes: [
                {
                    path: '/user/:id',
                    component: User,
                    children: [
                        {
                            path: 'profile',
                            component: UserProfile,
                        },
                        {
                            path: 'posts',
                            component: UserPosts
                        }
                    ]
                }
            ]
        });

        // 实例化 Vue
        var vm = new Vue({
            el: '#app',
            router: router,
            data: {
                message: '用户信息管理系统'
            }
        });
    </script>
</body>
</html>